import { createApp } from 'vue';
import videoDialog from './main.vue';
import { videoStore } from '@/store/modules/video.ts';
const videoStoreIns = videoStore();
videoDialog.newInstance = (options) => {
  const optionsId = options?.deviceId;
  if (videoStoreIns.has(optionsId)) return {};
  const ins = createApp(videoDialog);
  // 创建元素节点
  const rootNode = document.createElement('div');
  rootNode.id = `video_instance_${optionsId}`
  rootNode.style.position = 'relative';
  let width = '300px';
  let height = '240px';
  if (options.videoPerson) {
    width = '240px';
    height = '160px';
  }
  rootNode.style.width = width;
  rootNode.style.height = height;
  // 在body标签内部插入此元素
  document.querySelector('#video_container').appendChild(rootNode);

  let app = ins.mount(rootNode);
  app.setBoxStyle({
    width,
    height,
  });
  videoStoreIns.add(optionsId, app);

  return {
    diagram: app,
  };
};
export default videoDialog;
